<template>
<!-- 视图部分 html标签-->
<h3>vue的基本语法</h3>
<ul>
    <li>指令和“{{}}”语法</li>
    <li>生命周期</li>
    <li>watch和计算周期</li>
    <li>axios发送网络请求</li>
    <li>pinia</li>
</ul>
<h3>{{data}}</h3>
<input type="button" value="提交" @click="fn()">
</template>


<!-- js部分vue组件-->
<script>
//声明数据
//let data="hrllo vue"
export default{
    setup(){
        let data="hrllo vue"
         //vue3最大的特点是将所有的vue语法全部都写在setup这个函数里
         //数据  函数  生命周期  和vue相关的js部分


        function fn(){
           alert("弹出")
        }
        return{
            data,
            fn
        }
    }
}
</script>

<!--scoped的作用：在style里写的样式只对当前页面有效-->
<style scoped>
h3{
    background-color: blue;
}
</style>